<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>商品详情</title>
    <meta name="keywords" content="文乐文">
    <meta name="description" content="文乐文">

    <link rel="stylesheet" href="static/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="static/css/common.css" type="text/css">
    <link href="static/css/exzoom.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div id="app" v-cloak>
        <div class="car" @click="toCart">
            <img src="./static/image/car.png" alt="" srcset="">
        </div>
        <!-- 包含头部 -->
        <div class="header_box">
            <!-- container-fluid -->
            <div class="header container">
                <div class="logo_box">
                    <img src="static/picture/logo2.png">
                </div>
                <div class="nav_box">
                    <a href="index.html">
                        <div class="item">首页</div>
                    </a>
                   
                   
                    <a href="goods.html">
                        <div class="item" :class="!goodsType?'active':''">产品中心</div>
                    </a>
                    <a href="integral.html">
                        <div class="item" :class="goodsType?'active':''">积分商城</div>
                    </a>
                    <a href="lease.html">
                        <div class="item">进销存ERP</div>
                      </a>
                    <a href="service.html">
                        <div class="item ">服务与支持</div>
                    </a>
                    <a href="my.html">
                        <div class="item ">个人中心</div>
                    </a>
                 
                </div>
                <div class="buy-box">
                    <a href="javascript:;" class="tit">购买</a>
                    <div class="sub" style="display: none;">
                        <div class="list">
                            <a target="_blank" href="https://mall.jd.com/index-11504190.html?from=pc">文乐文京东旗舰店</a>
                        </div>
                    </div>
                </div>
                <div class="search_box">
                    <input name="keyword" type="text" class="search_input" id="header_search_input" placeholder="搜索">
                    <button id="header_search_btn" class="search_btn"></button>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="page_product">
                <div class="crumb row">
                    <div class="item"><a href="index.html">首页</a></div>
                    <div class="item sep"> > </div>
                    <div class="item"><a href="integral.html">积分商城</a></div>
                    <div class="item sep"> > </div>
                    <div class="item">{{goodsInfo.data?.productInfo?.storeName}}</div>
                </div>
                <div class="product_info_box row">
                    <div class="col-sm-4 img_preview_box">
                        <div class="exzoom" id="exzoom">
                            <!--大图区域-->
                            <div class="exzoom_img_box">
                                <el-carousel height="370px">
                                    <el-carousel-item v-for="item in sliderImage" :key="item">
                                        <el-image
                                        :src="item"
                                        fit="fit"></el-image>
                                    </el-carousel-item>
                                </el-carousel>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-8 item_info">
                        <div class="name">{{goodsInfo.data?.productInfo?.storeName}}</div>
                        <div class="name" style="font-size: 13px;">{{goodsInfo.data?.productInfo?.keyword}}</div>
                        <div class="attr_box">
                            <!--<div class="spec_attr">物料编码：</div>-->
                            <div class="spec_attr">最小销售单位：{{goodsInfo.data?.productInfo?.unitName}}</div>
                        </div>
                        <div class="productWinList">
                            <div class="item" v-for="(item, indexw) in attr.productAttr" :key="indexw">
                                <div class="title">{{ item.attrName }}</div>
                                <div class="listn acea-row row-middle">
                                    <div class="itemn" :class="item.index === itemn ? 'on' : ''"
                                        @click="tapAttr(indexw, indexn)" v-for="(itemn, indexn) in item.attrValues"
                                        :key="indexn">
                                        {{ itemn }}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="sku_box">
                            <p class="sku_title" v-if="goodsType">价格：<span
                                    style="color: red;font-size: 22px;">{{attr.productSelect?.price}} 积分
                                </span><span>（库存：{{attr.productSelect?.stock}}）</span></p>
                            <p class="sku_title" v-else>价格：<span
                                    style="color: red;font-size: 22px;">￥{{attr.productSelect?.price}}
                                </span><span>（库存：{{attr.productSelect?.stock}}）</span></p>
                        </div>

                        <div class="sku_box" v-if="attr.productSelect.agentPrice">
                            <p class="sku_title" >代理商价格：<span
                                    style="color: red;font-size: 22px;">￥{{attr.productSelect?.agentPrice}}
                                </span></p>
                        </div>



                        <div class="sku_box">
                            数量：
                            <el-input-number v-model="attr.productSelect.cart_num" :min="1"
                                :max="attr.productSelect?.stock" />
                        </div>
                        <div class="btn_box">
                            <button v-if="attr.productSelect.stock <= 0 "
                                style="margin-right: 10px;background: #ccc;color: #ccc;"
                                class="btn btn-primary login_btn" type="button">已售罄</button>
                            <!-- <button @click="addCar" v-if="attr.productSelect.stock > 0 && !goodsType"
                                style="margin-right: 10px;" class="btn btn-primary login_btn"
                                type="button">加入购物车</button>
                            <button @click="goBuy" v-if="attr.productSelect.stock > 0" style="margin-right: 10px;"
                                class="btn btn-primary login_btn" type="button">立即{{goodsType?'兑换':'购买'}}</button> -->
                                <button @click="toKuaisuOrder" v-if="attr.productSelect.stock > 0" style="margin-right: 10px;"
                                    class="btn btn-primary login_btn" type="button">加入购物车</button>
                                <button @click="toKuaisuOrder" v-if="attr.productSelect.stock > 0" style="margin-right: 10px;"
                                    class="btn btn-primary login_btn" type="button">立即购买</button>

                            <!-- <a href="https://mall.jd.com/index-11504190.html?from=pc" target="_blank">
                                <button class="btn btn-primary login_btn" type="button">去京东下单</button>
                            </a> -->
                        </div>
                    </div>
                </div>
                <div class="product_content">
                    <p v-html="goodsInfo.data?.productInfo?.content"></p>
                </div>
            </div>

        </div>


        <!-- 包含公共底部文件 -->
        <div class="footer">
            <div class="footer_box container">
                <div class="contact_box col-sm-4 f-cb">
                    <div class="dtitle">服务/Service</div>
                    <div class="tel_box">
                        <p class="title">全国统一热线电话</p>
                        <p class="tel">0574-58974484</p>
                    </div>
                    <div class="mail_box">
                        <p class="title">服务邮箱</p>
                        <p class="mail">598292588@qq.com</p>
                    </div>
                </div>
                <div class="nav_list col-sm-4 f-cb">
                    <div class="dtitle">导航/Navigation</div>
                    <ul class="nav_box">
                        <li><a href="about.html">关于我们</a></li>
                        <li><a href="index1.html">商品中心</a></li>
                        <li><a href="lease.html">打印机租赁</a></li>
                        <li><a href="service.html">服务与支持</a></li>
                        <li><a href="contact.html">联系我们</a></li>
                    </ul>
                </div>
                <div class="search col-sm-4 f-cb">
                    <div class="dtitle">产品中心/Product center</div>
                    <div class="search_box">
                        <input class="search_input" name="keyword" placeholder="搜索">
                        <!-- <button class="btn btn-primary jd_btn" type="button">京东商城</button>-->
                        <a class="btn btn-primary jd_btn" target="_blank"
                            href="https://mall.jd.com/index-11504190.html?from=pc">京东商城</a>
                    </div>
                    <div class="wechat_box">
                        <div class="item">
                            <img src="static/picture/wechat.svg">
                        </div>
                        <div class="item">
                            <img src="static/picture/weibo.svg">
                        </div>
                    </div>
                </div>
            </div>

            <div class="site_info container">
                Copyright ©2020 宁波文乐文科技有限公司 版权所有 <a
                    href="https://beian.miit.gov.cn/#/Integrated/index">浙ICP备2020041669号-1</a>
            </div>
        </div>
    </div>

    <link rel="stylesheet" href="static/css/index.css" rel="stylesheet">
    <script src="static/js/vue.js"></script>
    <script src="static/js/index.full.js"></script>

    <script src="static/js/jquery.js" type="text/javascript"></script>
    <script src="static/js/exzoom.js" type="text/javascript"></script>
    <script src="static/js/common.js" type="text/javascript"></script>
</body>

</html>
<script type="text/javascript">
    $("#exzoom").exzoom({
        autoPlay: false,
    });
</script>


<script>
    const {
        createApp,
        ref,
        reactive,
        onMounted,
    } = Vue

    const { ElMessage, ElMessageBox } = ElementPlus

    createApp({
        setup() {
            const goodsType = ref('')

            const productValue = ref([])

            const id = ref(null)
            const token = ref(null)

            token.value = localStorage.getItem('token') ? localStorage.getItem('token') : ''

            const sliderImage = ref([])
            let goodsInfo = reactive({
                data: {}
            })

            const productInfo = reactive({
                data: {}
            })

            let attr = reactive({
                cartAttr: false,
                productAttr: [],
                productSelect: {}
            })

            // 商品详情
            const getInfo = () => {
                $.ajax({
                    url: apiurl + `/api/front/product/detail/${id.value}?type=normal`,
                    headers: {
                        'Authori-zation': token.value
                    },
                    success: (res) => {
                        goodsInfo.data = res.data
                        productInfo.data = res.data.productInfo;

                        sliderImage.value = JSON.parse(res.data?.productInfo?.sliderImage)

                        attr.productAttr = res.data.productAttr
                        productValue.value = res.data.productValue
                        let productAttr = attr.productAttr.map(item => {
                            return {
                                attrName: item.attrName,
                                attrValues: item.attrValues.split(','),
                                id: item.id,
                                isDel: item.isDel,
                                productId: item.productId,
                                type: item.type
                            }
                        });
                        attr.productAttr = productAttr

                        goodsType.value = productInfo.data.pointProduct == 1 ? true : false

                        DefaultSelect();
                    },
                })
            }

            const toKuaisuOrder = () => {
                window.location.href = `batch.html?id=${id.value}`
            }
            

            const tapAttr = (indexw, indexn) => {
                console.log(attr)

                attr.productAttr[indexw].index = attr.productAttr[indexw].attrValues[indexn]

                let value = getCheckedValue().join(",");

                let productSelect = productValue.value[value];

                if (productSelect) {

                    attr.productSelect.image = productSelect.image
                    attr.productSelect.price = productSelect.price
                    attr.productSelect.stock = productSelect.stock
                    attr.productSelect.unique = productSelect.id
                    attr.productSelect.cart_num = 1

                } else {

                    attr.productSelect.image = productInfo.data.image
                    attr.productSelect.price = productInfo.data.price
                    attr.productSelect.stock = productInfo.data.stock
                    attr.productSelect.unique = productInfo.data.id
                    attr.productSelect.cart_num = 1

                }
            }

            const getCheckedValue = () => {
                let productAttr = attr.productAttr;
                let value = [];
                for (let i = 0; i < productAttr.length; i++) {
                    for (let j = 0; j < productAttr[i].attrValues.length; j++) {
                        if (productAttr[i].index === productAttr[i].attrValues[j]) {
                            value.push(productAttr[i].attrValues[j]);
                        }
                    }
                }
                console.log(value)
                return value;
            }

            const DefaultSelect = () => {
                let productAttr = attr.productAttr;
                let value = [];
                for (let key in productValue.value) {
                    if (productValue.value[key] && productValue.value[key].stock && productValue.value[key].stock > 0) {
                        value = attr.productAttr.length ? key.split(",") : [];
                        break;
                    }
                }
                for (let i = 0; i < productAttr.length; i++) {
                    productAttr[i].index = value[i]
                }
                //sort();排序函数:数字-英文-汉字；
                let productSelect = productValue.value[value.join(",")];
                if (productSelect && productAttr.length) {
                    attr.productSelect.storeName = productInfo.data.storeName
                    attr.productSelect.image = productSelect.image
                    attr.productSelect.price = productSelect.price
                    attr.productSelect.stock = productSelect.stock
                    attr.productSelect.unique = productSelect.id
                    attr.productSelect.cart_num = 1

                } else if (!productSelect && productAttr.length) {

                    attr.productSelect.storeName = productInfo.data.storeName
                    attr.productSelect.image = productInfo.data.image
                    attr.productSelect.price = productInfo.data.price
                    attr.productSelect.stock = productInfo.data.stock
                    attr.productSelect.unique = productInfo.data.id
                    attr.productSelect.cart_num = 1


                } else if (!productSelect && !productAttr.length) {

                    attr.productSelect.storeName = productInfo.data.storeName
                    attr.productSelect.image = productInfo.data.image
                    attr.productSelect.price = productInfo.data.price
                    attr.productSelect.stock = productInfo.data.stock
                    attr.productSelect.unique = productInfo.data.id || ""
                    attr.productSelect.cart_num = 1

                }

                console.log(attr)

            }


            const getQueryParams = (url) => {
                const paramArr = url.slice(url.indexOf("?") + 1).split("&");
                const params = {};
                paramArr.map((param) => {
                    const [key, val] = param.split("=");
                    params[key] = decodeURIComponent(val);
                });
                return params;
            }

            const goBuy = () => {
                token.value = localStorage.getItem('token') ? localStorage.getItem('token') : ''
                if (!token.value) {
                    return ElMessage.error('当前账号未登录')
                }

                let data = {
                    preOrderType: 'buyNow',
                    orderDetails: [{
                        attrValueId: attr.productSelect.unique,
                        productId: id.value,
                        productNum: attr.productSelect.cart_num,
                    }]
                }
                $.ajax({
                    url: apiurl + '/api/front/order/pre/order',
                    data: JSON.stringify(data),
                    type: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authori-zation': token.value
                    },
                    success: (res) => {
                        if (res.code == 200) {
                            const preOrderNo = res.data.preOrderNo
                            window.location.href = `cart.html?preOrderNo=${preOrderNo}`
                        } else {
                            ElMessage.error(res.message)
                        }
                    },
                })

            }

            onMounted(() => {
                let query = getQueryParams(window.location.href)
                id.value = query?.id


                getInfo()
            });

            const addCar = () => {
                token.value = localStorage.getItem('token') ? localStorage.getItem('token') : ''
                if (!token.value) {
                    return ElMessage.error('当前账号未登录')
                }

                let data = {
                    productId: id.value,
                    cartNum: parseFloat(attr.productSelect.cart_num),
                    isNew: false,
                    productAttrUnique: attr.productSelect !== undefined ? attr.productSelect.unique : goodsInfo.data?.productInfo?.id
                }
                $.ajax({
                    url: apiurl + '/api/front/cart/save',
                    data: JSON.stringify(data),
                    type: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authori-zation': token.value
                    },
                    success: (res) => {
                        if (res.code == 200) {
                            ElMessage.success('加入购物车成功')
                        } else {
                            ElMessage.error(res.message)
                        }
                    },
                })
            }
            const toCart = () => {
                window.location.href = 'cart.html'
            }

            return {
                id,
                token,
                attr,
                productInfo,
                productValue,
                goodsType,
                goodsInfo,
                sliderImage,
                getInfo,
                DefaultSelect,
                getQueryParams,
                tapAttr,
                getCheckedValue,
                goBuy,
                addCar,
                toCart,
                toKuaisuOrder
            }
        },
    }).use(ElementPlus).mount('#app')
</script>

<style>
    .productWinList {
        margin: 10px 0 15px 0;
    }

    .productWinList .item .title {
        padding: 5px 0;
        font-size: 14px;
        line-height: 14px;
    }

    .productWinList .item .listn {
        display: flex;
        align-items: center;
    }


    .productWinList .item .listn .itemn {
        border: 1px solid #F2F2F2;
        font-size: 13px;
        color: #282828;
        padding: 4px 16px;
        border-radius: 5px;
        margin-top: 10px;
        margin-right: 7px;
        background-color: #F2F2F2;
        cursor: pointer;
    }

    .productWinList .item .listn .on {
        color: #E93323;
        background: #fff4f3;
        border-color: #E93323;
    }
</style>